import React from "react";
import ReactDOM from "react-dom";
import VisbarGUI, { extractDefault } from "../src";
import { GUIConfig } from "./consants";
import { set } from "lodash";
import { Rate } from "antd";
import "./index.less";
interface IState{
  data: any;
  config: any;
}
class App extends React.Component<any, IState> {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      config: GUIConfig
    }
    VisbarGUI.register({ "rate": Rate });
  }
  guiConfigChange = (ev) => {
    const { data } = this.state;
    set(data, ev.path, ev.value)
    this.setState({
      data: { ...data }
    }, () => console.log(data));
  }
  
  render() {
    return <div className="example">
      <VisbarGUI config={this.state.config}
        onChange={this.guiConfigChange}
        value={extractDefault({ config: this.state.config, value: this.state.data })}
      />
  </div>
  }
}

ReactDOM.render(<App />, document.getElementById("root"));